<template>
<div>
    <v-card class="mx-auto" max-width="320">
      <a :href="link + value._id">
        <v-img :src="value.cover" height="200px">
          <div class="tocenter">
            <v-btn
              class="mx-2"
              fab
              dark
              x-large
              color="grey"
              text
            >
              <v-icon dark x-large>mdi-play</v-icon>
            </v-btn>
          </div>
        </v-img>

        <v-card-title>
          {{ value.title }}
        </v-card-title>
      </a>
        <v-card-subtitle class="mt-2">
        {{ value.synopsis }}
        </v-card-subtitle>

      <v-card-actions>
        <v-row class="pa-4 ml-3">
          <v-col sm="1">
            <follow-btn :object="value._id"></follow-btn>
          </v-col>
          <v-spacer />
          <v-col sm="1">
            <like-btn :object="value._id"></like-btn>
          </v-col>
          <v-spacer />
          <v-col sm="1">
            <up-btn :object="value._id"></up-btn>
          </v-col>
          <v-spacer />
        </v-row>
      </v-card-actions>

      <v-expand-transition>
        <div v-show="show">
            <v-divider></v-divider>
            <v-card-text> 详情 </v-card-text>
        </div>
      </v-expand-transition>
    </v-card>
</div>
</template>

<script>
export default {
  name: 'WoCard',
  components: {
    LikeBtn: () => import('@/components/actions/LikeBtn'),
    FollowBtn: () => import('@/components/actions/FollowBtn'),
    UpBtn: () => import('@/components/actions/UpBtn'),
  },
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    link: {
      type: String,
    },
    show: {
      type: Boolean,
      default: false
    }
  },
 
}
</script>

<style>
.tocenter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
